<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片懒加载(可视区域加载)</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
        }

        #SB {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #SB .in {
            border: 1px solid red;
            margin: 10px;
            text-align: center;
            height: 400px;
            width: 400px;
            float: left;
        }

        .in img {
            border: none;
            vertical-align: middle;
            height: 400px;
            width: 400px;
        }
    </style>
</head>

<body>
<ul id="SB">
    <li class="in"><img src="" data-imgurl="img/1.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/2.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/3.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/4.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/5.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/6.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/7.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/8.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/9.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/10.jpg"></li>

    <li class="in"><img src="" data-imgurl="img/1.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/2.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/3.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/4.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/5.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/6.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/7.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/8.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/9.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/10.jpg"></li>

    <li class="in"><img src="" data-imgurl="img/1.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/2.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/3.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/4.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/5.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/6.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/7.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/8.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/9.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/10.jpg"></li>

    <li class="in"><img src="" data-imgurl="img/1.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/2.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/3.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/4.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/5.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/6.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/7.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/8.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/9.jpg"></li>
    <li class="in"><img src="" data-imgurl="img/10.jpg"></li>

</ul>
<script type="text/javascript">
    var aImages = document.getElementById("SB").getElementsByTagName('img'); //获取id为SB的文档内所有的图片
    loadImg(aImages);
    window.onscroll = function() { //滚动条滚动触发
        loadImg(aImages);
    };
    //getBoundingClientRect 是图片懒加载的核心
    function loadImg(arr) {
        for(var i = 0, len = arr.length; i < len; i++) {
            if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
                arr[i].isLoad = true; //图片显示标志位
                //arr[i].style.cssText = "opacity: 0;";
                (function(i) {
                    setTimeout(function() {
                        if(arr[i].dataset) { //兼容不支持data的浏览器
                            aftLoadImg(arr[i], arr[i].dataset.imgurl);
                        } else {
                            aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
                        }
                        arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
                    }, 500)
                })(i);
            }
        }
    }

    function aftLoadImg(obj, url) {
        var oImg = new Image();
        oImg.onload = function() {
            obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象
        }
        oImg.src = url; //oImg对象先下载该图像
    }
</script>
</body>

</html>